<template>
  <div class="economy">
    <div class="banner">
      <!-- <img src="@/assets/EconomyView/agent_banner.png" alt /> -->
    </div>
      <!-- <div class="search">
        <input type="text" placeholder="请输入经纪名字进行搜索..." v-model="searchStr"  value="" />
        <button @click="searchFn"><i>搜索</i></button>
    </div> -->
    <div class="main">
      <div class="contain">
        <div class="personal" v-for="item in AgentsList" :key="item.id" >
          <div class="img">
            <img :src="item.image" alt />
          </div>
          <div class="mainer">
            <h2 class="agent_name">{{item.name}}</h2>
            <span>{{item.address}}</span>
            <p style="overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;"
>{{item.desc}}</p>
          </div>
          <!-- 右侧按钮 -->
          <div class="agent_btn_list">
            <!-- 添加微信 -->
            <div class="agent_btn">
              <i class="el-icon-chat-line-round"></i>
            </div>
            <!-- 添加电话 -->
            <div class="phone_btn">
              <i class="el-icon-phone-outline"></i>
              <div class="box"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getAgentsList } from "@/api/EconomyView";
export default {
  data() {
    return {
      AgentsList: [],
      showPic: false,
      searchStr:''
    };
  },
  async created() {
    // 获取经纪
    await this.getAgentsList();
  },
  methods: {
    // 搜索经纪
    searchFn(){},
    // 显示图片
    showPicFn() {
      this.showPic =true
    },
    // 封装获取经纪的接口
    async getAgentsList() {
      let res = await getAgentsList();
      // console.log(131, res.data);
      this.AgentsList = res.data;
      console.log(75,this.AgentsList);
    }
  }
};
</script>

<style lang='scss'>
@import url("@/assets/planeIconfont/iconfont.css");
.economy {
  // width: 80%;
  // margin: 10px auto;
  // background-color: aqua;
  position: relative;
  margin: 0 auto;
  .banner {
    height: 240px;
    background: url("../assets/EconomyView/agent_banner.png") no-repeat center;
    // center / cover;
  }
  // 搜索框

   .search {
            width: 30%;
            margin: 100px auto;
            display: flex;
            /*border: 1px solid red;*/
        }
 
        .search input {
            float: left;
            /* //左浮动 */
            flex: 3;
            height: 30px;
            outline: none;
    border-radius: 5px;

            // border: 1px solid red;
        border: 2px solid #6c1886;
        border-right:   2px solid #6c1886;


            box-sizing: border-box;
            /* //盒子模型，怪异IE盒子模型，width=content+border*2+padding*2 */
            padding-left: 10px;
        }
 
        .search button {
            float: right;
            flex: 1;
            height: 30px;
            background-color: #6c1886;
            color: white;
            border-style: none;
            outline: none;
        }
 
        .search button i {
            font-style: normal;
        }
 
        .search button:hover {
            font-size: 16px;
        }

  .main {
    // width: 80%;
    width: 1240px;

    margin: 0 auto;
    margin-top: 40px;
    // height: 800px;
    // background-color: aqua;
    .title {
      text-align: center;
      margin: 10px auto;
    }
    .contain {
      // margin: 0 10px;
      // width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      // background-color: pink;
      .personal {
        // display: flex;
        // width: 40%;
        // flex-direction: column;
        // border: 1px solid #eee;
        // border-radius: 5px;
        // height: 250px;
        // justify-content: space-between;
        // flex-wrap: wrap;
        display: flex;
        width: calc(50% - 5px);
        padding: 20px;
        margin-bottom: 16px;
        border: 1px solid #f1f1f1;
        box-sizing: border-box;
        border-radius: 8px;
        background-color: #fff;
        .img {
          // background-color: red;
          margin: 25px 10px;
          img {
            height: 200px;
            width: 200px;
          }
        }
        .mainer {
          margin: 30px 0;
          flex: 1;
          display: flex;
          align-items: center;
          flex-direction: column;
          // align-items: flex-start;
          // margin: 25px 10px;
          // width: 500px;
          .agent_name {
            font-size: 18px;
            line-height: 24px;
            margin-bottom: 8px;
            color: #000000;
            flex: 1;
          }
          span {
            // font-weight: 700;
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 12px;
            color: #999999;
            flex: 1;
          }
          p {
            flex: 1;
            margin: -25px 0 0 10px;
          }
        }
        .agent_btn_list {
          display: flex;
          align-items: center;
          color: #fff;

          .agent_btn {
            background-color: #e32785;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 8px;
            cursor: pointer;
          }
          .phone_btn {
            background-color: #6c1886;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 8px;
            cursor: pointer;
            margin-right: 0;
            .pic {
              display: flex;
              align-items: center;
              flex-direction: column;
              color: #000000;
            }
          }
        }
      }
    }
  }
}
</style>